<div id="container" class="span9 paddingnone fixContainerWidth" style="margin-top: 0px;">
    <div class="form-body">
        <div class="form-title" trans="station_info">WIFI Users</div>
        <div id="divStation" class="content ko-grid-container">
            <table cellpadding="0" cellspacing="0" id="tabStation" class="ko-grid">
                <thead>
                    <tr>
                        <th trans="station_number">No.</th>
                        <th trans="host_name">Host Name</th>
                        <th trans="mac_address">MAC Address</th>
                        <th width="100"></th>
                    </tr>
                </thead>
                <tbody data-bind="foreach:deviceInfo" id="userlist">
                </tbody>
            </table>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function() {
        $("#list-nav").find(".active").removeClass("active")
        $("#list-nav").find("[mid='wifi_users']").addClass("active");
    });

    addInterval(function() {
        getCurrentWifiUser();
    }, 1000);

    function getCurrentWifiUser() {
        $.get('goform/goform_get_cmd_process?isTest=false&cmd=station_list&_=' + new Date().getTime(), {}, function(data) {
            if (typeof(data) == 'string') {
                data = $.parseJSON(data);
            }

            var currentWifiUser = '';
            _.map(data.station_list, function(ele, idx) {
                currentWifiUser += '<tr>';
                currentWifiUser += '<td class="even">' + (idx + 1) + '</td>';
                currentWifiUser += '<td class="ko-grid-center">' + ele.hostname + '</td>';
                currentWifiUser += '<td class="ko-grid-center">' + ele.mac_addr + '</td>';
                // currentWifiUser += '<td class="ko-grid-center">' + ele.ip_addr + '</td>';
                currentWifiUser += '<td class="ko-grid-center"></td>';
                currentWifiUser += '</tr>';
            });
            $('#userlist').html(currentWifiUser);
        });
    }
</script>